<html>

<head>
  <title>Thermal Video</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type=text/javascript>
        $(function() {
          $('a#save').on('click', function(e) {
            e.preventDefault()
            $.getJSON('/save',
                function(data) {
              //do nothing
            });
            return false;
          });
        });
</script>
  <script type=text/javascript>
  $(function() {
    $('a#Led').on('click', function(e) {
      e.preventDefault()
      $.getJSON('/Led',
          function(data) {
        //do nothing
      });
      return false;
    });
  });
</script>
  <script type=text/javascript>
        $(function() {
          $('a#colormap').on('click', function(e) {
            e.preventDefault()
            $.getJSON('/colormap',
                function(data) {
              //do nothing
            });
            return false;
          });
        });
</script>
  <script type=text/javascript>
        $(function() {
          $('a#overlay').on('click', function(e) {
            e.preventDefault()
            $.getJSON('/overlay',
                function(data) {
              //do nothing
            });
            return false;
          });
        });
</script>
  <script type=text/javascript>
        $(function() {
          $('a#Camera').on('click', function(e) {
            e.preventDefault()
            $.getJSON('/Camera',
                function(data) {
              //do nothing
            });
            return false;
          });
        });
</script>
  <script type=text/javascript>
      $(function() {
        $('a#Thermal').on('click', function(e) {
          e.preventDefault()
          $.getJSON('/Thermal',
              function(data) {
            //do nothing
          });
          return false;
        });
      });
</script>
  <script type=text/javascript>
  $(function() {
    $('a#exit').on('click', function(e) {
      e.preventDefault()
      $.getJSON('/exit',
          function(data) {
        //do nothing
      });
      return false;
    });
  });
</script>
</head>

<!-- Center align things and add margins -->
<style>
  h1 {
    text-align: center;
  }

  .container {
    max-width: 960px;
    margin: auto;
  }

  .form {
    max-width: 960px;
    margin: auto;
  }

  .form-inline {
    margin: 5px;
    margin-left: -10px;
    margin-right: -10px;
  }

  .btn {
    margin-left: 3px;
  }
</style>

<body>
  <div class='container'>
    <h1>实时热成像视频监控</h1>
    <img src="/video_feed" width="960" height="720" />
  </div>
  <div class='container'>
    <form class="form-inline">
      <a href=# id=save><button class='btn btn-default'>Save</button></a>
      <a href=# id=Led><button class='btn btn-default'>Led</button></a>
      <a href=# id=colormap><button class='btn btn-default'>Colormap</button></a>
      <a href=# id=overlay><button class='btn btn-default'>Overlay</button></a>
      <a href=# id=Camera><button class='btn btn-default'>Camera</button></a>
      <a href=# id=Thermal><button class='btn btn-default'>Thermal</button></a>
      <a href=# id=exit><button class='btn btn-default'>Exit</button></a>
    </form>
  </div>

</body>

</html>
